<template>
  <div style="width: 100%;min-height:100%">
    <p style="font-weight: 900;font-size: 26px;margin-left: 30px">学生课表页面</p>
    <div style="margin: 10px 0">
      <div style="margin-bottom: 15px">
        <div style="font-size: 30px;margin-left: 30px">专业:智能科学与技术</div>
      </div>
    </div>
    <div style="margin-left: 30px;margin-top: 30px">
      <el-table border :stripe="true" :show-header="true" :data="tableData" :header-cell-style="{background:'#d0d0d0',color:'#000000'}">
        <el-table-column prop="courseid" label="课程">
          <template #default="scope">
            <div v-if="scope.row.courseid=='1'">java</div>
            <div v-if="scope.row.courseid=='2'">python</div>
            <div v-if="scope.row.courseid=='3'">微信小程序</div>
            <div v-if="scope.row.courseid=='4'">python爬虫</div>
            <div v-if="scope.row.courseid=='5'">web前端</div>
            <div v-if="scope.row.courseid=='6'">机器学习</div>
            <div v-if="scope.row.courseid=='7'">神经网络</div>
            <div v-if="scope.row.courseid=='8'">神经网络</div>
          </template>
        </el-table-column>
        <el-table-column prop="teacher" label="教师">
        </el-table-column>
        <el-table-column prop="semester" label="学期">
          <template #default="scope">
          <div v-if="scope.row.semester=='1'">大一上</div>
          <div v-if="scope.row.semester=='2'">大一下</div>
          <div v-if="scope.row.semester=='3'">大二上</div>
          <div v-if="scope.row.semester=='4'">大二下</div>
          <div v-if="scope.row.semester=='5'">大三上</div>
          <div v-if="scope.row.semester=='6'">大三下</div>
          <div v-if="scope.row.semester=='7'">大四上</div>
          <div v-if="scope.row.semester=='8'">大四下</div>
          </template>
        </el-table-column>
        <el-table-column prop="schooltime" label="周几">
          <template #default="scope">
            <div v-if="scope.row.schooltime=='1'">周一</div>
            <div v-if="scope.row.schooltime=='2'">周二</div>
            <div v-if="scope.row.schooltime=='3'">周三</div>
            <div v-if="scope.row.schooltime=='4'">周四</div>
            <div v-if="scope.row.schooltime=='5'">周五</div>
            <div v-if="scope.row.schooltime=='6'">周六</div>
            <div v-if="scope.row.schooltime=='7'">周天</div>
          </template>
        </el-table-column>
        <el-table-column prop="classtime" label="上课时间">
          <template #default="scope">
            <div v-if="scope.row.classtime=='1'">08:10-08:50</div>
            <div v-if="scope.row.classtime=='2'">09:00--09:40</div>
            <div v-if="scope.row.classtime=='3'">09:50--10:30</div>
            <div v-if="scope.row.classtime=='4'">10:00--11:20</div>
            <div v-if="scope.row.classtime=='5'">11:30--12:10</div>
            <div v-if="scope.row.classtime=='6'">14:10--14:50</div>
            <div v-if="scope.row.classtime=='7'">15:00--15:40</div>
            <div v-if="scope.row.classtime=='8'">15:50--16:30</div>
            <div v-if="scope.row.classtime=='9'">16:40--17:20</div>
            <div v-if="scope.row.classtime=='10'">18:30--19:10</div>
            <div v-if="scope.row.classtime=='11'">19:20--20:00</div>
            <div v-if="scope.row.classtime=='12'">20:10--20:50</div>
            <div v-if="scope.row.classtime=='13'">21:00--21:40</div>
          </template>
        </el-table-column>
        <el-table-column prop="examplace" label="教室">
        </el-table-column>
      </el-table>
    </div>
    <!--    分页-->
    <div  style="margin-top: 20px;margin-left:30px">
      <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[1,2,5]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>



  </div>
</template>

<script  setup>
import {computed, onMounted, ref} from 'vue'
import {selectAllCourse} from "../../api/Second"
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const total=ref(0)
const pageNum = ref(1)
const pageSize = ref(5)
const value = ref('')

const  tableData = ref([])
function  getData() {
  selectAllCourse(
      pageNum.value,
      pageSize.value
  ).then(res => {
    console.log(res)
    tableData.value = res.data.data.list
    total.value=res.data.data.total
  })
}
//分页
const  handleCurrentChange =(res)=>{
  console.log(res)
  //我的这个pageNum是获取到的pageNum
  pageNum.value=res
  getData()
}
const handleSizeChange =(res1)=>{
  console.log(res1)
  pageSize.value=res1
  getData()
}




onMounted(() => {
  getData()
})
</script>

<style scoped>


</style>